package me.fung.rem.app.content

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.unit.dp
import me.fung.rem.component.SearchButton

@Composable
fun ContentView.topBar(modifier: Modifier) {
    LaunchedEffect(Unit) {
        p.showSearch()
    }
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        left(modifier = Modifier.weight(1f))
        middle(modifier = Modifier)
        right(modifier = Modifier.weight(1f).padding(start = 10.dp))
    }
}

@Composable
fun ContentView.middle(modifier: Modifier) {
    val rp = remember { p }
    SearchButton(
        value = rp.filter.value,
        onValueChange = {
            rp.filter.value = it
            rp.newFilter = true
        },
        modifier = modifier.height(25.dp).border(1.dp, Color.LightGray, RoundedCornerShape(50)).padding(2.dp)
            .onKeyEvent {
                if (it.key == Key.Enter) {
                    rp.addSearch(rp.filter.value)
                    rp.addFilter(rp.filter.value)
                    rp.filter.value = ""
                    return@onKeyEvent true
                }
                false
            },
        widthIn = 100.dp to 100.dp,
        enabled = true,
    ) {
        Icon(Icons.Default.Search, "", Modifier.size(25.dp))
    }
}

@OptIn(ExperimentalMaterialApi::class, ExperimentalLayoutApi::class)
@Composable
fun ContentView.right(modifier: Modifier) {
    val rp = remember { p }
    FlowRow(modifier = modifier) {
        rp.search.forEach {
            FilterChip(
                selected = true,
                onClick = {
                    rp.addSearch(it)
                    rp.addFilter(it)
                },
                colors = ChipDefaults.filterChipColors(backgroundColor = MaterialTheme.colors.background),
            ) {
                Text(text = it)
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class, ExperimentalLayoutApi::class)
@Composable
fun ContentView.left(modifier: Modifier) {
    val rp = remember { p }
    FlowRow(modifier = modifier) {
        rp.filterList.forEach {
            FilterChip(
                selected = true,
                onClick = {
                    rp.removeFilter(it)
                },
                modifier = Modifier.padding(horizontal = 1.dp),
                colors = ChipDefaults.filterChipColors(backgroundColor = MaterialTheme.colors.background),
                leadingIcon = {
                    Icon(Icons.Default.Clear, null)
                }
            ) {
                Text(text = it)
            }
        }
    }
}